<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'

const props = defineProps({
  // 视角到主体的距离
  distance: {
    type: Number,
    default: 180
  },
  // 视角旋转角度
  alpha: {
    type: Number,
    default: 35
  },
  beta: {
    type: Number,
    default: 0
  },
  data: {
    type: Array,
    default: () => [
      {
        name: "临时",
        value: 40,
        percentage: "40.00%",
        itemStyle: { color: "#1E47F1" }
      },
      {
        name: "特级",
        value: 10,
        percentage: "10.00%",
        itemStyle: { color: "#DD3BF3" }
      },
      {
        name: "一级",
        value: 20,
        percentage: "20.00%",
        itemStyle: { color: "#31E49F" }
      },
      {
        name: "二级",
        value: 30,
        percentage: "30.00%",
        itemStyle: { color: "#7C4CF5" }
      }
    ]
  }
})

const chartRef = ref(null)
let chart = null

const createLabelSeries = (pieData) => {
  return {
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    startAngle: 90,
    silent: true,
    label: {
      show: true,
      position: 'outside',
      formatter: (params) => {
        return [
          `{percentage|${params.data.percentage}}`,
          `{name|${params.name}}`
        ].join('\n')
      },
      rich: {
        name: {
          fontSize: 14,
          color: '#ffffff',
          align: 'center',
          padding: [4, 0]
        },
        percentage: {
          fontSize: 28,
          color: '#8BE8FF',
          align: 'center',
          padding: [0, 0, 8, 0]
        }
      }
    },
    labelLine: {
      show: true,
      length: 20,
      length2: 10,
      lineStyle: {
        color: '#ffffff'
      }
    },
    itemStyle: {
      opacity: 0
    },
    data: pieData,
    z: 1
  }
}

// 计算3D饼图参数
const getPie3D = (pieData) => {
  const series = []
  const sumValue = pieData.reduce((sum, item) => sum + item.value, 0)
  let startRadian = Math.PI / 2 // 从90度开始
  
  pieData.forEach((item) => {
    const percentage = item.value / sumValue
    const endRadian = startRadian - percentage * Math.PI * 2 // 逆时针方向
    
    series.push({
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false
      },
      pieData: item,
      pieStatus: {
        selected: false,
        hovered: false
      },
      itemStyle: {
        color: item.itemStyle.color
      },
      parametricEquation: {
        u: {
          min: endRadian,
          max: startRadian,
          step: Math.PI / 48
        },
        v: {
          min: 0,
          max: Math.PI,
          step: Math.PI / 20
        },
        x: (u, v) => {
          const r = (1 + Math.cos(v)) / 2
          return r * Math.cos(u)
        },
        y: (u, v) => {
          const r = (1 + Math.cos(v)) / 2
          return r * Math.sin(u)
        },
        z: (u, v) => {
          const h = 0.08 // 控制高度，从0.15降低到0.08
          return Math.sin(v) * h
        }
      }
    })
    startRadian = endRadian
  })

  // 添加标签层
  series.push(createLabelSeries(pieData))
  
  return series
}

onMounted(() => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    const option = {
      tooltip: {
        show: false
      },
      xAxis3D: {
        show: false
      },
      yAxis3D: {
        show: false
      },
      zAxis3D: {
        show: false
      },
      grid3D: {
        show: false,
        boxHeight: 40,
        viewControl: {
          distance: props.distance,
          alpha: props.alpha,
          beta: props.beta,
          rotateSensitivity: 0,
          zoomSensitivity: 0,
          autoRotate: true, // 开启自动旋转
          autoRotateSpeed: 10 // 设置旋转速度
        },
        light: {
          main: {
            intensity: 1.2,
            shadow: true
          },
          ambient: {
            intensity: 0.3
          }
        }
      },
      series: getPie3D(props.data)
    }
    chart.setOption(option)
  }
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
})
</script>

<style scoped>
.chart-container {
  background-color: #000B2A;
}
</style>